<template>
  <el-badge :value="newMsgCount" class="item">
    <el-button type="success" plain @click="openChat">聊天面板</el-button>
  </el-badge>
</template>

<script>
import * as api from '@/api/call'
import Communication from '@/utils/Communication'
export default {
  data() {
    return {
      communication: null,
      newMsgCount: 0,
      service: [
        { name: 'callPanelSrc', src: '/xmessage-cms/iframe/callPanel' },
        { name: 'chatPanelSrc', src: '/xmessage-cms/iframe/chatPanel' },
        { name: 'inviteDialogSrc', src: '/xmessage-cms/iframe/inviteDialog' },
      ],
    }
  },
  mounted() {
    this.getUser()
  },
  methods: {
    // 按照用户名查询用户
    getUser() {
      this.initialization().then(res => {
        this.communication = Communication.getInstance(res)
        this.communication.listenNewMsg(() => {
          this.newMsgCount++
        })
      })
    },
    openChat() {
      this.newMsgCount = 0
      this.communication.displayChatPanel(true)
    },
    initialization() {
      let that = this
      let url = {
        audioWidth: 480,
        audioHeight: 700,
        videoWidth: 460,
        videoHeight: 800,
        intercomWidth: 1460,
        intercomHeight: 1009,
        chatPanelSrc: '',
        callPanelSrc: '',
        inviteDialogSrc: '',
      }
      return new Promise(function (resolve, reject) {
        let num = 0
        for (let i = 0; i < that.service.length; i++) {
          const item = that.service[i]
          let data = {
            service: item.src,
            userName: localStorage.getItem('account'),
          }
          api.gridLocationHistory(data).then(res => {
            if (res.code == '0') {
              num++
              url[item.name] = 'https://36.140.66.86:1443' + res.data.url
              if (num == 3) {
                resolve(url)
              }
            }
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.item {
  margin-left: 10px;
}
</style>
